<template>
  <div class="container">
      <div class="main">
         <p class="tree">
              <el-tree
            :data="data"
            show-checkbox
            node-key="id"
            ref="tree"
            :props="defaultProps"
            @check="getCheckedKeys"
         />
         </p>
         <p class="tag">
             <el-tag
            v-for="tag in tags"
            :key="tag.name"
            class="mx-1"
            closable
            :type="tag.type"
            @close="handleClose(tag)"
        >
            {{ tag.name }}
        </el-tag>
         </p>
      </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance()
// import type { ElInput } from 'element-plus'
const defaultProps = {
  children: 'children',
  label: 'label',
}
const data = [
  {
    id: 1,
    label: '食品中心',
    children: [
      {
        id: 4,
        label: '食品一部',
        children: [
          {
            id: 9,
            label: '第一分部',
          },
          {
            id: 10,
            label: '第二分部',
          },
        ],
      },
    ],
  },
  {
    id: 2,
    label: '制药中心',
    children: [
      {
        id: 5,
        label: '制药一部',
      },
      {
        id: 6,
        label: '制药二部',
      },
    ],
  },
  {
    id: 3,
    label: '医疗中心',
    children: [
      {
        id: 7,
        label: '急救部',
      },
      {
        id: 8,
        label: '诊疗部',
      },
    ],
  },

]
const tags = ref([ 

])
console.log(JSON.parse(JSON.stringify(tags.value)));
// const Newtags = JSON.parse(JSON.stringify(tags.value));
const getCheckedKeys = (key) =>{
  console.log(key);
  // console.log(Newtags);
  console.log( JSON.parse(JSON.stringify(tags.value)).length == 0);
  if(JSON.parse(JSON.stringify(tags.value)).length == 0) {
    console.log(11111);
    const obj ={
      name : key.label,
      type: '',
      id : key.id
    };
    console.log('对象',obj);
    tags.value.push(obj); 

    // if(key.children){
    //   console.log(key.children);
    //   key.children.forEach(item => {
    //     console.log(item.label);
    //     const obj ={
    //       name : item.label,
    //       type: '',
    //       id : key.id
    //     };
    //     tags.value.push(obj); 
    //   });
    // }  
    // console.log(tags.value);

  }else{
    console.log(222222);
    // tags.value.forEach(item =>{
    //   console.log('ffff',item);
    //   // if(item.id == item.id){
        
    //   //   tags.value.splice(tags.value.indexOf(item), 1);
    //   //   console.log('去重',tags.value);
    //   // }
    // })
    // tags.value.filter(tags.value.indexOf(item), 1);
    console.log('dddd',tags.value);
    console.log('rrrr',key.id);
    tags.value.forEach(item =>{
      console.log('ffff',item);
      if(item.id == key.id){
        console.log('33333',tags.value);
        // tags.value = tags.value;
        console.log('被删除的一项',item);
        tags.value.splice(tags.value.indexOf(item), 2);
        console.log('44444',tags.value);
      }else{
        console.log(66666);
        const obj ={
          name : key.label,
          type: '',
          id : key.id
        };
        console.log('对象',obj);
        tags.value.push(obj);  
        console.log('没有取消一样的',tags.value);  
        if(key.children){
          console.log(key.children);
          key.children.forEach(item => {
            console.log(item.label);
            const obj ={
              name : item.label,
              type: '',
              id : key.id
            };
            tags.value.push(obj);
            
          });
        }  
      }
    })  
  }
  // const obj ={
  //   name : key.label,
  //   type: '',
  //   id : key.id
  // };
  // console.log('对象',obj);
  // tags.value.push(obj);  
  // if(key.children){
  //   console.log(key.children);
  //   key.children.forEach(item => {
  //     console.log(item.label);
  //     const obj ={
  //       name : item.label,
  //       type: '',
  //       id : key.id
  //     };
  //     tags.value.push(obj);  
  //   });
  // }
  // console.log('标签数组',tags);
  // console.log('被选中的key值',key);
  // console.log('被选中的name值',key.label);

  // const obj ={
  //   name : key.label,
  //   type: '',
  // };
  // console.log('对象',obj);
  // tags.value.push(obj);
  // console.log(tags);
}

const handleClose = (tag) => {
  console.log('5555',tag);
  // const news = [];
  // this.dialogVisible = true;
  console.log(tags.value);
  console.log(tag);
  tags.value.splice(tags.value.indexOf(tag), 1)
  console.log('删除后的标签数组',tags.value);
  // tags.value.forEach(item=>{
  //   console.log(item.id);
  //   news.push(item.id);
  //   console.log('新',news);
  //   console.log(proxy.$refs.tree);
   
  //   // console.log(proxy.$refs.tree.setCheckedNodes);
  // })
   proxy.$refs.tree.setCheckedNodes(tags.value);

  // this.$refs.tree.setCheckedKeys()

}

</script>
<style  scoped>
    .container {
        width : 50%;
        height : 500px;
        /* background-color : red; */
        margin: 0 auto;
        border: 2px solid #42b983;
    }
    .main{
        width : 80%;
        margin: 20px auto;
        display: flex;
        justify-content: center;
        border:  1px solid #42b983;
        
    }
    .tree{
        width: 35%;
        height: 100%;
        margin-left: 10px;
    }
    .tag{
        width: 65%;
        margin-right: 10px;
        /* height: 100%; */
        border-left:  1px solid #42b983;
    }

</style>

